<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>宠爱商城</title>
    <!-- Favicons -->
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.ico}">

    <link rel="stylesheet" th:href="@{/assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/plugins.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.min.css}">
    <script th:src="@{/assets/js/vendor.min.js}"></script>
    <script th:src="@{/assets/js/plugins.min.js}"></script>

    <script th:src="@{/assets/js/main.js}"></script>

    <script type="text/javascript" th:src="@{/assets/js/axios.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/vue.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/jquery-3.2.1.slim.min.js}"></script>


</head>

<body>

    <div class="header section" th:replace="~{common/head::head}"></div>


    <!-- Breadcrumb Area Start -->
    <div class="section breadcrumb-area bg-name-bright">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <div class="breadcrumb-wrapper">
                        <h2 class="breadcrumb-title">宠爱商城欢迎您</h2>
                        <ul>
                            <li><a th:href="index.html">返回首页</a></li>
                            <li>Variable Product</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Area End -->

    <!-- 商品开始 -->
    <div class="section section-margin" >
        <div class="container">
            <div class="row">


<!--                图片相关-->
                <div class="col-lg-5 offset-lg-0 col-md-8 offset-md-2">

                    <!-- Product Details Image Start -->
                    <div class="product-details-img">

                        <!-- Single Product Image Start -->
                        <div class="single-product-img swiper-container product-gallery-top">
                            <div class="swiper-wrapper popup-gallery">
                                <a class="swiper-slide w-100" th:href="@{/assets/images/products/large-product/1.png}">
                                    <img class="w-100" th:src="@{/assets/images/products/large-product/1.png}" alt="Product">
                                </a>
                                <a class="swiper-slide w-100" th:href="@{/assets/images/products/large-product/2.png}">
                                    <img class="w-100" th:src="@{/assets/images/products/large-product/2.png}" alt="Product">
                                </a>
                                <a class="swiper-slide w-100" th:href="@{/assets/images/products/large-product/3.png}">
                                    <img class="w-100" th:src="@{/assets/images/products/large-product/3.png}" alt="Product">
                                </a>
                                <a class="swiper-slide w-100" th:href="@{/assets/images/products/large-product/4.png}">
                                    <img class="w-100" th:src="@{/assets/images/products/large-product/4.png}" alt="Product">
                                </a>
                            </div>
                        </div>
                        <!-- Single Product Image End -->

                        <!-- Single Product Thumb Start -->
                        <div class="single-product-thumb swiper-container product-gallery-thumbs">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img th:src="@{/assets/images/products/medium-plus-product/1.png}" alt="Product">
                                </div>
                                <div class="swiper-slide">
                                    <img th:src="@{/assets/images/products/medium-plus-product/2.png}" alt="Product">
                                </div>
                                <div class="swiper-slide">
                                    <img th:src="@{/assets/images/products/medium-plus-product/3.png}" alt="Product">
                                </div>
                                <div class="swiper-slide">
                                    <img th:src="@{/assets/images/products/medium-plus-product/4.png}" alt="Product">
                                </div>

                            </div>

                            <!-- Next Previous Button Start -->
                            <div class="swiper-button-next swiper-nav-button"><i class="ti-arrow-right"></i></div>
                            <div class="swiper-button-prev swiper-nav-button"><i class="ti-arrow-left"></i></div>
                            <!-- Next Previous Button End -->

                        </div>
                        <!-- Single Product Thumb End -->

                    </div>
                    <!-- Product Details Image End -->

                </div>

                <div class="col-lg-7" id="vue1">



                    <!-- Product Summery Start -->
                    <div class="product-summery position-relative" >

                        <input type="hidden" id="goodsId" th:value="${Good.goodsId}">

                        <!-- Product Head Start -->
                        <div class="product-head m-b-15">
                            <h2 class="product-title" id="goodsName">[[${Good.goodsName}]]</h2>
                        </div>
                        <!-- Product Head End -->

                        <!-- Price Box Start -->
                        <div class="price-box m-b-10">
                            ￥<span class="regular-price" id="salePrice">[[${Good.salePrice}]]</span>
                            <span class="old-price"><del>[[${Good.originalPrice}]]</del></span>
                        </div>
                        <p/>


<!--&lt;!&ndash;                        衣物-->
                        <div class="product-color-variation m-b-25" th:if="${goodsTypeName=='宠物衣物'}">
                            <span> <strong>颜色: </strong></span>
                            <input type="radio" name="color" v-model="colorId"  value="1" th:text="红">
                            <input type="radio" name="color" v-model="colorId"  value="2" th:text="黄">
                            <input type="radio"  name="color" v-model="colorId" value="3" th:text="蓝">
                            <input type="radio"  name="color" v-model="colorId" value="4" th:text="绿">

                        </div>

                        <div class="product-size m-b-20" th:if="${goodsTypeName=='宠物衣物'}">
                            <span><strong>型号 :</strong></span>
                            <input type="radio" name="clothSize" v-model="sizeId" value="8" th:text="S">
                            <input type="radio" name="clothSize" v-model="sizeId" value="9" th:text="M">
                            <input type="radio" name="clothSize" v-model="sizeId" value="10" th:text="L">

                        </div>



<!--衣物-->


<!--                        食物-->
                        <div class="product-size m-b-20" th:if="${goodsTypeName=='宠物食品'}">

                            <span><strong>型号 :</strong></span>
                            <input type="radio" name="foodsize" v-model="sizeId" value="1" th:text="小袋2kg">
                            <input type="radio" name="foodsize" v-model="sizeId" value="2" th:text="中袋5kg">
                            <input type="radio" name="foodsize" v-model="sizeId" value="3" th:text="大袋10kg">
                            <input type="radio" name="foodsize" v-model="sizeId" value="4" th:text="特大袋20kg">

                        </div>

                        <div class="product-material m-b-25" th:if="${goodsTypeName=='宠物食品'}">

                            <span><strong>口味 :</strong></span>
                            <input type="radio" name="foodtaste" v-model="tasteId"  value="1" th:text="鸡肉味">
                            <input type="radio" name="foodtaste" v-model="tasteId" value="2" th:text="海鲜味">
                            <input type="radio" name="foodtaste" v-model="tasteId" value="3" th:text="牛肉味">

                        </div>


<!--                            食物-->

                        <!--                        玩具-->
                        <div class="product-size m-b-20" th:if="${goodsTypeName=='宠物玩具'}">

                            <span><strong>型号 :</strong></span>
                            <input type="radio" name="toy" v-model="sizeId" value="5" th:text="大">
                            <input type="radio" name="toy" v-model="sizeId" value="6" th:text="中">
                            <input type="radio" name="toy" v-model="sizeId" value="7" th:text="小">

                        </div>

                        <p class="desc-content m-b-25" style="color: #0a53be">[[${Good.description}]]商品描述</p>
                        <!-- Product Material End -->

                        <div class="product-inventroy m-b-15">
                            <span class="inventroy-title"> <strong>库存:</strong></span>
                            <span class="inventory-varient" id="saleCount">[[${Good.saleCount}]]</span>
                        </div>


                        <div class="sku m-b-15">
                            <span class="inventroy-title"> <strong>产地：</strong></span>
                            <span>[[${Good.productAddress}]]-[[${Good.productFactory}]]</span>
                        </div>
                        <!-- SKU End -->

                        <!-- Product Inventory Start -->

                        <!-- Quantity Start -->
                        <div class="quantity d-flex align-items-center m-b-25">
                            <span class="m-r-10"><strong>购买数量: </strong></span>

                                <input  id="buyCount"  type="number" min="1" value="1">


                        </div>
                        <!-- Quantity End -->

                        <!-- Cart Button Start -->
                        <div class="cart-btn action-btn m-b-30">
                            <div class="action-cart-btn-wrapper d-flex">
                                <div class="add-to_cart" >
                                    <a class="btn btn-primary btn-hover-dark rounded-0" style="height: 47px;padding-top: 16px" @click="addcart()">添加购物车</a>
                                </div>
                                <div class="single-product-buy m-b-30" >


<!--                                    href="'/cart/goodsToAddress"-->
                                    <a  th:onclick="buy()" class="btn btn-primary btn-hover-dark rounded-0">立即购买</a>
                                </div>
                            </div>
                        </div>
                        <!-- Cart Button End -->

                        <!-- Single Product Buy Button Start -->

                        <!-- Single Product Buy Button End -->

                    </div>

                </div>

            </div>
        </div>
    </div>
    <!-- Single Product Section End -->






    <footer class="section footer-section" th:replace="~{common/foot::foot}"></footer>


    <!-- Modal Start  -->
    <!-- Modal End  -->

    <!-- 返回页面顶部 -->
    <a th:href="@{#}" class="scroll-top show" id="scroll-top">
        <i class="arrow-top ti-angle-double-up"></i>
        <i class="arrow-bottom ti-angle-double-up"></i>
    </a>




</body>

<script>

  var cartVues=new Vue({
      el:"#vue1",
      data:{
              goodsId:null,
              goodsName:null,
              salePrice:null,
              buyCount:1,
              colorId:null,
              tasteId:null,
              sizeId:null,
              saleCount:null,

      },
      methods:{
          addcart(){
              let url="/cart/add"
             axios.get(url,{
                 params:{
                     goodsId:this.goodsId,
                     goodsName:this.goodsName,
                     salePrice:this.salePrice,
                     buyCount:this.buyCount,
                     colorId:this.colorId,
                     tasteId:this.tasteId,
                     sizeId:this.sizeId,
                 }
             }).then((data)=>{

                 if (data.data=="goToLogin"){
                     location="/login.html"
                 }else{
                     alert(data.data)
                 }

             })

          }
      }

  })


  var elementById = document.getElementById("goodsName");
    cartVues.$data.goodsName=elementById.innerText

  var elementById1 = document.getElementById("salePrice");
    cartVues.$data.salePrice=elementById1.innerText

  var elementById2 = document.getElementById("saleCount");
    cartVues.$data.saleCount=elementById2.innerText

  var elementById3 = document.getElementById("buyCount");
    elementById3.addEventListener("change", function () {
        cartVues.$data.buyCount =elementById3.value
    })

  var elementById4 = document.getElementById("goodsId");
  cartVues.$data.goodsId=elementById4.value



function buy() {
    location="http://localhost:9001/cart/goodsToAddress?buyCount="+cartVues.$data.buyCount
}









</script>



</html>